import React from 'react'
import { changeNav,getGroupList,getStoreList,getGroupcount,getStorecount,getGroupdetail,getStoredetail,getGroupopened,getStoreopened } from '../actions'
import { connect } from 'react-redux'
import { Button,SegmentedControl,Flex,WhiteSpace,SearchBar,
	List,Badge,Pagination,Icon,WingBlank } from 'antd-mobile'
import CSSModules from 'react-css-modules'
import styles from './tenant.less'
import {appconstant} from '../common/constant'
import hhistory from '../history'
import NullList from './../components/nullList.js'

const Item = List.Item;
const Brief = Item.Brief;

@CSSModules(styles, { allowMultiple: false })
class Tenant extends React.Component{
	constructor(props) {
	    super(props)
	    this.state = { crtselect: [],
	    				// ,
	    			 //   grouppage:{ page:appconstant.pagerconfig.page,limit:appconstant.pagerconfig.limit },
	    			 //   storepage:{ page:appconstant.pagerconfig.page,limit:appconstant.pagerconfig.limit },
	    			   crtpage:appconstant.pagerconfig.page-1,
	    			   total:88,
	    			   statics:{
	    			   	gttotal:0,
	    			   	tomonthexpire:0,
	    			   	tomonthnew:0
	    			   },
						selectType:0,
						maskerSelect:true
	    			 }
	}

	componentWillReceiveProps( nextProps ){
		if( this.pagetype === 0 ){
			this.state.crtselect = this.generateGrouplist( nextProps.groupList.detail )
			this.state.total = nextProps.groupList.total
		}else if( this.pagetype === 1 ){
			this.state.crtselect = this.generateStorelist( nextProps.storeList.detail )
			this.state.total = nextProps.storeList.total
		}
	}

	grouppage = {
		page:appconstant.pagerconfig.page,
		limit:appconstant.pagerconfig.limit
	}

	storepage = {
		page:appconstant.pagerconfig.page,
		limit:appconstant.pagerconfig.limit
	}

	componentDidMount(){
		// this.pageobj = {}
		// this.pageobj.page = appconstant.page
		// this.pageobj.limit = appconstant.limit

		this.props.tochangeNav({title:"商户",rbtn:[
			<Button key="1" onClick={this.toggetMaker.bind(this)} type="primary" inline size="small">{this.state.maskerSelect?'+':'-'}</Button>
		]})
		this.props.getStoreList( this.grouppage )
		this.props.getGroupList( this.storepage )
		this.props.getGroupcount()
		this.props.getStorecount()
	}
	toggetMaker(){
        this.setState({
            maskerSelect:!this.state.maskerSelect
		})
        this.props.tochangeNav({title:"商户",rbtn:[
			<Button key="1" onClick={this.toggetMaker.bind(this)} type="primary" inline size="small">{!this.state.maskerSelect?'+':'-'}</Button>
        ]})
	}
	gotoPush() {
		if(this.pagetype == 0){
            hhistory.push('/tenantPush')
		}else {
            hhistory.push('/storePush')
        }
	}
    gotoBind() {
        if(this.pagetype == 0){
            hhistory.push('/tenantBind')
        }else {
            hhistory.push('/storeBind')
        }
    }
	render(){
		if( this.pagetype === 0 ){
			this.state.crtselect = this.generateGrouplist(this.props.groupList.detail)
			this.state.statics = this.props.groupList
		}else if( this.pagetype === 1 ){
			this.state.crtselect = this.generateStorelist(this.props.storeList.detail)
			this.state.statics = this.props.storeList
		}
		return(
			<div>
				<div styleName='masker' style={{display:(this.state.maskerSelect?"none":"flex")}}>
					<div onClick={this.gotoPush.bind(this)}>
						<Icon size='lg' style={{width:'1rem',height:'1rem',margin:'0.5rem 0 0.2rem'}} type={require('./../components/assets/ic_group.svg')}></Icon>
						<p>开通新{this.pagetype == 0?'集团':'门店'}</p>
					</div>
					<div onClick={this.gotoBind.bind(this)}>
						<Icon size='lg' style={{width:'1rem',height:'1rem',margin:'0.5rem 0 0.2rem'}} type={require('./../components/assets/ic_bangding.svg')}></Icon>

						<p>绑定已有{this.pagetype == 0?'集团':'门店'}</p>
					</div>
				</div>
				<div styleName="topBG">
					<WhiteSpace size="lg" />
					<Flex>
						<Flex.Item></Flex.Item>
						<Flex.Item>
							<SegmentedControl
								values={['集团', '门店']}
								selectedIndex={this.pagetype}
								onChange={this.onChange}
								style={{background:'#242d33'}}
							/>
						</Flex.Item>
						<Flex.Item></Flex.Item>
					</Flex>
					<WhiteSpace size="lg" />
					<Flex>
						<Flex.Item>
							<div styleName="tanentnum1">{ this.state.statics.gttotal }</div>
							<div styleName="tanentnum">集团总数</div>
						</Flex.Item>
						<Flex.Item>
							<div style={{color:"#ec3a3a"}} styleName="tanentnum1">{ this.state.statics.tomonthexpire }</div>
							<div styleName="tanentnum">本月到期</div>
						</Flex.Item>
						<Flex.Item>
							<div style={{color:"#5bc46e"}} styleName="tanentnum1">{ this.state.statics.tomonthnew }</div>
							<div styleName="tanentnum">本月新增</div>
						</Flex.Item>
					</Flex>
					<WhiteSpace size="lg" />
				</div>
			    <SearchBar placeholder="搜索" />
			    <List className="my-list">
			        { this.state.crtselect }
			    </List>
			    <WhiteSpace size="lg" />
			    <WingBlank size="md">
				    <Pagination total={this.state.total}
				      current={this.state.crtpage}
				      locale={{
				        prevText: (<span style={{ display:"flex",alignItems:"center" }}><Icon type="left" />上一页</span>),
				        nextText: (<span style={{ display:"flex",alignItems:"center" }}>下一页<Icon type="right" /></span>),
				      }}
				      onChange={ this.pageChange }
				    />
				</WingBlank>
			    <WhiteSpace size="lg" />
			</div>
		)
	}

	onChange = (e) => {
	    if( e.nativeEvent.selectedSegmentIndex === 0 ){
	    	this.pagetype = 0
	    	this.setState({
	    		crtselect:this.generateGrouplist( this.props.groupList.detail ),
	    		crtpage:this.grouppage.page-1,
	    		total:this.props.groupList.total
	    	})
	    }else if( e.nativeEvent.selectedSegmentIndex === 1 ){
	    	this.pagetype = 1
	    	this.setState({
	    		crtselect:this.generateStorelist( this.props.storeList.detail ),
	    		crtpage:this.storepage.page-1,
	    		total:this.props.storeList.total
	    	})
	    }
	}

	pageChange = (e) => {
		if( this.pagetype === 0 ){//这是集团
			// this.setState({
			// 	grouppage:{ page:e,limit:appconstant.pagerconfig.limit }
			// })
			// this.state.crtpage = e
			this.grouppage.page = e + 1
			this.setState({
				crtpage:e
			})
			this.props.getGroupList( this.grouppage )
		}
		if( this.pagetype === 1 ){//这是门店
			// this.setState({
			// 	storepage:{ page:e,limit:appconstant.pagerconfig.limit }
			// })
			// this.state.crtpage = e
			this.storepage.page = e + 1
			this.setState({
				crtpage:e
			})
			this.props.getStoreList( this.storepage )
		}
	}

	generateGrouplist = ( target ) => {
			if(target.length > 0) {
                return target.map((item,i)=>{
                    return (
						<Item key={i} extra={ <Badge style={{ marginLeft: '0.12rem', padding: '0 0.06rem', backgroundColor: '#fd8900', borderRadius: "0.05rem" }} text={"待审核"}/> }
							// arrow="horizontal"
							  thumb={<img style={{width:'0.8rem',height:'0.8rem'}} src={item.groupLogo === "" || item.groupLogo === null ?
                                  "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"  : item.groupLogo} alt=""/> }
							  onClick = {
                                  ()=> {
                                      hhistory.push('/groupDetail/' + 'group_' + item.groupCode)
                                      this.props.getGroupdetail(item.groupCode)
                                      this.props.getGroupopened(item.groupCode)
                                  }
                              }
							  multipleLine>
							<p style={{color:'#333',fontSize:'0.3rem'}}>{item.groupName}</p>
							<Brief style={{color:'#a9a9a9',fontSize:'0.24rem'}}>{ item.groupCode }</Brief>
						</Item>
                    )
                })
			}else {
				return(<NullList  imgsrc={require('./png/icon_xx_wuxiaoxi.png')} text1='暂时没有集团'></NullList>)
			}
	}

	generateStorelist = ( target ) => {
		if(target.length > 0) {
            return target.map((item,i)=>{
                return (
					<Item key={i} extra={ <Badge text={"待审核"}/> }
						  arrow="horizontal"
						  thumb={ item.storeLogo === "" || item.storeLogo === null ?
                              "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"  : item.storeLogo }
						  onClick = { ()=>{ hhistory.push( '/storeDetail/' + 'store_' + item.storeCode )
                              console.log(item.storeCode)
                              this.props.getStoredetail( item.storeCode )
                              this.props.getStoreopened( item.storeCode )
                          } }
						  multipleLine>
                        {item.storeName}<Brief>{ item.storeCode }</Brief>
					</Item>
                )
            })
		}else{
			return(<NullList  imgsrc={require('./png/icon_xx_wuxiaoxi.png')} text1='暂时没有集团'></NullList>)
		}
	}

	// pageobj = {}
	pagetype = 0
}

const mapStateToProps = ( state ) => ({
	groupList:state.groupList,
  	storeList:state.storeList
})

const mapDispatchToProps = ( dispatch ) => {
	return{
		tochangeNav:navobj => dispatch( changeNav( navobj ) ),
		getGroupList:( data ) => dispatch( getGroupList( data ) ),
		getStoreList:( data ) => dispatch( getStoreList( data ) ),
		getGroupcount:() => dispatch( getGroupcount() ),
		getStorecount:() => dispatch( getStorecount() ),
        getGroupdetail:groupcode => dispatch( getGroupdetail( groupcode ) ),
        getStoredetail:storecode => dispatch( getStoredetail( storecode ) ),
        getGroupopened:groupcode => dispatch( getGroupopened( groupcode ) ),
        getStoreopened:storecode => dispatch( getStoreopened( storecode ) ),
	}
}

export default connect(mapStateToProps,mapDispatchToProps)(Tenant)